<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo0102-路由03-嵌套-命名视图</title>
</head>
<script src="../libs/vue.js"></script>
<script src="../libs/vue-router.3.5.3.js"></script>

<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
  <div id="app">
    <h1>Hello dynamic route !</h1>
    <!-- <user-settings></user-settings> -->

  <router-view/>
  </div>
</body>

<script>
/*

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

*/

const UserSettings = {
  template:`<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>`
};

Vue.component('user-settings',UserSettings );

Vue.component('NavBar', {
  template: `
    <div>
      这是左侧nav 子导航
    </div>
  `
});

const UserEmailsSubscriptions = {
  template:`
    <div>
      这是 email sub描述
    </div>`
};
const UserProfile = {
  template:`
    <div>
      这是 用户profile
    </div>`
};
const UserProfilePreview = {
  template:`
    <div>
      这是 user profile preview 预览子页
    </div>`
};

const routes = [
{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions  /* 没有命名视图，不加载helper对应的路由 */
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}
]

const router = new VueRouter({
  routes 
});

const app = new Vue({
  router
}).$mount('#app');

</script>
</html>